<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>

        html {
            /* css原生也支持变量的设置 */
            --color: #bfa;
            --length: 100px;
        }


        .box1 {
            /* calc()计算函数 */
            width: calc(200px*2);
            height: 100px;
            background-color: var(--color);
        }

        .box2 {
            width: 100px;
            height: 100px;
            color: var(--color);
        }

        .box3 {
            width: 100px;
            height: 100px;
            border: 10px solid var(--color);
        }
    </style>
  </head>
  <body>
      <!-- less是一门css的预处理语言 
                - less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式。
                - 在less中添加了许多新特性: 像对变量的支持, 对mixin的支持等等
                - less的语法大体上和css的语法一致,但是less中增添了许多对css的扩展,
                    所以浏览器无法直接执行less代码,要执行必须向将less转换为css,然后再有浏览器执行.
                    (安装Easy Less插件)
            
            
        -->
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
  </body>
</html>
